import {View, Text, StyleSheet, Image} from 'react-native';
import React from 'react';
import Login from './screens/Login';
import MallDetails from './screens/MallDetails';
import MallList from './screens/MallList';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {themeColorDark} from './style';

//创建原生的栈式导航器，得到“导航器”对象和“屏幕”对象
let {Navigator, Screen} = createNativeStackNavigator();

export default function App(props) {
  //console.log('App组件的props：', props); //没有navigation/route对象
  return (
    //导航容器<=>路由器
    <NavigationContainer>
      {/* 导航器<=>路由列表 initialRouteName：初始路由名称(即默认首页)*/}
      <Navigator initialRouteName="login">
        {/* 屏幕<=>路由 */}
        <Screen
          name="login"
          component={Login}
          options={{
            headerShown: false, //是否显示页头/标题栏
          }}
        />
        <Screen
          name="mlist"
          component={MallList}
          options={{
            title: '社区商城', //标题栏中的文字
            headerStyle: {backgroundColor: themeColorDark}, //标题栏背景颜色
            headerTintColor: '#fff', //标题栏文字颜色
            headerTitleAlign: 'center', //标题栏标题文字对齐方式
            headerBackVisible: false, //“后退”按钮是否可见
          }}
        />
        <Screen
          name="mdetails"
          component={MallDetails}
          options={{
            title: '商品详情',
            headerStyle: {backgroundColor: themeColorDark},
            headerTintColor: '#fff',
            headerTitleAlign: 'center',
          }}
        />
        {/* RN属于原生App，没有地址栏，不用担心用户输入不存在的地址问题 */}
        {/* <Screen name="*" component={NotFound} /> */}
      </Navigator>
    </NavigationContainer>
  );
}
